<template>
  <div class="subPageMain" style="background: none">
    <div class="noticeDetail_detail">
      <div class="noticeDetail_head">{{ data.title }}</div>
      <div class="noticeDetail_main">
        <div v-html="data.content" />
      </div>
    </div>
    <div class="editContainer">
      <div class="edit_headTitle">回复</div>
      <div class="edit_main">
        <div class="replyEdit">
          <quill-editor
            ref="myQuillEditor"
            v-model="form.content"
            :options="editorOption"
            class="my-quill-editor"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
          />
        </div>
        <div class="replyEditBtnGroup">
          <div class="replyBtn">
            <!-- <el-button type="primary" @click="submitFun">提 交</el-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getUserJobDetails } from "@/api/job";
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      row: {},
      data:{},
      form: {
        content: "",
      },
      visible: this.value,
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            // [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            // [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            // [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            // ['image', 'video'] // 链接、图片、视频
          ],
        },
        placeholder: "请输入正文",
      },
    };
  },
  created() {
    this.row = this.$route.query.row;
    console.log(this.row);
    this.getUserJobDetailsFun();
  },
  methods: {
    
    getUserJobDetailsFun(){
        const params = {
            jobId: this.row.id,
            userId: ""
        }
        getUserJobDetails(params).then((res) => {
          this.form.content = res.data.answer;
          this.data = res.data;
        });
    },
    // 失去焦点事件
    onEditorBlur(quill) {},
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      // 移除禁用编辑器的逻辑，或者根据实际情况调整 this.isEdit 的值
      // if (!this.isEdit) {
      //   quill.enable(false);
      // }
      console.log("editor ready!", quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.form.content = html;
    },
  },
};
</script>
<style lang="scss" scoped>
.subPageMain {
  position: relative;
  padding-top: 25px;
  width: 1200px;
  min-height: 600px;
  margin: 30px auto;
  .noticeDetail_detail {
    background-color: #f5f6f8;
    margin: 16px auto;
    border-radius: 8px;
    .noticeDetail_head {
      padding: 25px 30px;
    }
    .noticeDetail_main {
      padding: 16px 30px 30px;
    }
  }
  .editContainer {
    position: relative;
    width: 1200px;
    min-height: 345px;
    min-height: auto;
    background-color: #f5f6f8;
    // background: #ffffff;
    margin: 16px auto 0;
    padding-bottom: 40px;
    border-radius: 8px;
    box-sizing: border-box;
    .edit_headTitle {
      position: relative;
      padding: 30px 34px 0;
      margin-bottom: 0;

      box-sizing: border-box;
    }
    .edit_main {
      padding: 20px 34px 0;
      .replyEdit {
        height: 170;
        .my-quill-editor {
          height: 80%; /* 这里设置为父容器高度的80%，根据实际情况调整 */
        }
        .ql-editor {
          height: 300px;
        }
      }
      .replyEditBtnGroup {
        margin-top: 16px;
        height: 36px;
        .replyBtn {
          float: right;
        }
      }
    }
  }
}
</style>
